<%--
  Created by IntelliJ IDEA.
  User: Tolean
  Date: 2018/5/17
  Time: 19:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>

<html>
<head>
    <title>LYON</title>
    <%@include file="common/head.jspf"%>
    <link rel="Shortcut Icon" href="${lyon}/static/images/favicon.ico"  />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="${lyon}/static/assets/js/jquery.min.js"></script>
    <script src="${lyon}/interface/admin/common/layui/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${lyon}/interface/admin/common/layui/js/xadmin.js"></script>
    <!--[if lte IE 8]><script src="${lyon}/static/assets/js/ie/html5shiv.js"></script><![endif]-->
    <link rel="stylesheet" href="${lyon}/static/assets/css/main.css" />
    <!--[if lte IE 9]><link rel="stylesheet" href="${lyon}/static/assets/css/ie9.css" /><![endif]-->
    <!--[if lte IE 8]><link rel="stylesheet" href="${lyon}/static/assets/css/ie8.css" /><![endif]-->
</head>
<body>
<div id="page-wrapper">
    <!-- Header -->
    <%@include file="common/header.jsp"%>
    <!-- Main -->
    <!-- Main -->
    <section id="main_aboutme" class="container 75%">
        <header>
            <h2>Contact Me</h2>
            <p>Tell me what you think about my little operation.</p>
        </header>
        <div class="box">
            <form>
                <div class="row uniform 50%">
                    <div class="6u 12u(mobilep)">
                        <input type="text" name="name" id="name" value="" placeholder="姓名" />
                    </div>
                    <div class="6u 12u(mobilep)">
                        <input type="text" name="contact" id="contact" value="" placeholder="联系方式" />
                    </div>
                </div>
                <div class="row uniform 50%">
                    <div class="12u">
                        <textarea name="message" id="message" placeholder="输入你的消息" rows="6"></textarea>
                    </div>
                </div>
                <div class="row uniform 50%">
                    <div class="6u 12u(mobilep)">
                        <input type="text" name="code" id="code" value="" placeholder="验证码" />
                    </div>
                    <div class="6u 12u(mobilep)">
                        <img id="imgVerify" src="" alt="点击更换验证码"onclick="getVerify(this);">
                    </div>
                </div>
                <div class="row uniform">
                    <div class="12u">
                        <ul class="actions align-center">
                            <li><a class="button big" onclick="submit()" >发送信息</a></li>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
    </section>

</div>
<script>
    $(document.body).ready(function () {
        //首次获取验证码
        $("#imgVerify").attr("src","/onstage/getCode.do?"+Math.random());
    });
    function getVerify(obj){
        obj.src = "/onstage/getCode.do?"+Math.random();
    }
    function changeCode() {
        $("#imgVerify").attr("src","/onstage/getCode.do?"+Math.random());
    }
    function submit() {
        var name=$("#name").val();
        var message=$("#message").val();
        if(name==null||name==''){
            layer.msg("姓名不能为空!",{icon:2,time:2000});
            return;
        }else if(message==null||message==''){
            layer.msg("信息不能为空!",{icon:2,time:2000});
            return;
        }else{
            checkCode();
        }
    }

    function checkCode() {
        var code=$("#code").val();
        if(code==null||code==''){
            layer.msg("验证码输入错误!",{icon:2,time:2000});
            changeCode();
        }else{
            code=code.toUpperCase();
            $.get("${lyon}/onstage/checkCode.do",{code:code},function (res) {
                if(res.success){
                    var name=$("#name").val();
                    var contact=$("#contact").val();
                    var message=$("#message").val();
                    $.post("${lyon}/onstage/addContactMsg.do",{name:name,contact:contact,message:message},function (res) {
                        if(res.success){
                            layer.msg("提交信息成功,谢谢!",{icon:1,time:2000});
                            changeCode();
                        }else{
                            layer.msg("抱歉,提交信息失败!",{icon:2,time:2000});
                            changeCode();
                        }
                    },"json");
                }else{
                    layer.msg("验证码输入错误!",{icon:2,time:2000});
                    changeCode();
                }
            },"json");
        }
    }
</script>
<!-- Scripts -->
<script src="${lyon}/static/assets/js/jquery.dropotron.min.js"></script>
<script src="${lyon}/static/assets/js/jquery.scrollgress.min.js"></script>
<script src="${lyon}/static/assets/js/skel.min.js"></script>
<script src="${lyon}/static/assets/js/util.js"></script>
<!--[if lte IE 8]><script src="${lyon}/static/assets/js/ie/respond.min.js"></script><![endif]-->
<script src="${lyon}/static/assets/js/main.js"></script>

</body>
</html>